<template>
  <div class="cookies_wrapper">
    <div class="cookies-btn_wrapper">
      <el-button type="primary" :loading="getLoading" @click="getCurrentCookie">获取</el-button>
      <el-button type="danger" :loading="setLoading" @click="setCookieInPage">设置</el-button>
    </div>
    <div class="cookies-list_wrapper">
      <el-table
        :data="tableList"
        style="width: 100%">
        <el-table-column
          prop="key"
          label="字段名">
        </el-table-column>
        <el-table-column
          prop="value"
          label="值">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
const LOCALSTORAGE_COOKIES_KEY = 'TOOLS_COOKIESLIST'
export default {
  name: 'Cookies',
  data() {
    return {
      getLoading: false,
      setLoading: false,
      tableList: []
    }
  },
  mounted() {
    const _localData = localStorage.getItem(LOCALSTORAGE_COOKIES_KEY)
    this.tableList = _localData ? JSON.parse(_localData) : []
  },
  methods: {
    getCurrentCookie() {
      try {
        this.getLoading = true
        const _self = this
        if (window.chrome && window.chrome.tabs) {
          window.chrome.tabs.query({
            active: true,
            currentWindow: true
          }, function (tabs) {
            let tabId = tabs.length ? tabs[0].id : null
            window.chrome.tabs.sendMessage(tabId, {
              message: 'GET_COOKIES',
            }, function (response) {
              // 存储
              localStorage.setItem(LOCALSTORAGE_COOKIES_KEY, JSON.stringify(response || []))
              // 获取到返回的 cookies
              _self.tableList = response || []
              _self.getLoading = false
              _self.$message({
                message: '获取成功',
                type: 'success'
              })
            })
          })
        }
      } catch {
        this.$message({
          message: '抱歉，获取cookie失败，请重试',
          type: 'warning'
        })
        this.tableList = []
        this.getLoading = false
      }
    },
    setCookieInPage() {
      const _cookiesStrList = this.tableList.map(item => {
        return `${item.key}=${item.value}`
      })
      this.setLoading = true
      const _self = this
      try {
        if (window.chrome && window.chrome.tabs) {
          window.chrome.tabs.query({
            active: true,
            currentWindow: true
          }, function (tabs) {
            let tabId = tabs.length ? tabs[0].id : null
            window.chrome.tabs.sendMessage(tabId, {
              message: 'SET_COOKIES_PUSH',
              data: _cookiesStrList || [],
            }, function () {
              _self.setLoading = false
              _self.$message({
                message: '设置成功',
                type: 'success'
              })
            })
          })
        }
      } catch {
        this.$message({
          message: '抱歉，设置cookie失败，请重试',
          type: 'warning'
        })
        this.setLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cookies_wrapper {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  .cookies-btn_wrapper {
    display: flex;
  }
}
</style>

